<template>
  <div class="equipmentlist">
    <ul>
        <li v-for="item of equiplistname" :key="item.item_id" @click="equipInfo(item)">
            <div class="equipImg">
              <img :src="'https://game.gtimg.cn/images/yxzj/img201606/itemimg/'+item.item_id+'.jpg'"></div>
            <div class="equipName">
              <p >{{item.item_name}}</p>
            </div>
        </li>
      <div class="equipBox" v-if="noshow">
        <div class="equipInfo">
          <h1>{{itemInfo.item_name}}</h1>
          <p>购买价格 : {{itemInfo.total_price}}</p>
          <p>出售价格 : {{itemInfo.price}}</p>
          <p class="fontc">{{itemInfo.des1}}</p>
          <p class="fontc">{{itemInfo.des2}}</p>
          <el-button type="success" @click="equipInfo">了 解</el-button>
        </div>
      </div>
    </ul>
  </div>
</template>

<script>

  export default {
    name: 'EquipList',
    data () {
      return {
        equiplistname: [],
        noshow: false,
        itemInfo: []
      }
    },
    created () {
      this.getHeroList()
    },
    methods: {
      getHeroList () {
        this.$http('../../../static/json/item.json').then(this.getHerListSucc)
      },
      getHerListSucc (res) {
        const data = res.data
        this.equiplistname = data

      },
      equipInfo (item) {
        this.itemInfo = item
        this.noshow = !this.noshow
        }
      }

  }
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
  .equipmentlist ul li {
    width: 18.8%;
    height: 100px;
    float: left;
    margin-top: 10px;
    margin-left: 1%;
    margin-bottom: 10px;
    box-shadow: 1px 1px 2px #cccccc;
  }
  .equipImg img {
    width: 100%;
    height: 80px;
  }
  .equipName p {
    height: 20px;
    line-height: 20px;
    text-align: center;
    margin-top: -5px;
  }
  .equipBox {
    width: 100%;
    height: 100%;
    background-color: rgba(0,0,0,.7);
    overflow: hidden;
    z-index:4 ;
    position: fixed;
    top:0;
    left: 0;
  }
  .equipInfo {
    width:70%;
    position: fixed;
    z-index: 4;
    background-color: white;
    top:50%;
    left: 50%;
    margin-top: -80px;
    margin-left: -38%;
    text-align: center;
    box-shadow: 2px 2px 4px #cccccc;
    padding: 10px;
  }
  .equipInfo h1 {
    margin: 5px 0;
    font-weight: bold;
    font-size: 20px;
  }
  .equipInfo p {
    margin-bottom: 5px;
  }
  .fontc {
    text-shadow: 1px 1px 2px #ffe87c;
  }
</style>
